<template>
  <el-dialog :append-to-body="true" :visible.sync="dialog" title="修改库存" width="610px">
    <el-form ref="form" :model="form.info" :rules="rules">
      <!--有规格-->
      <el-form-item v-if="form.info.specification_details && form.info.specification_details.length > 0">
        <el-table :data="form.info.specification_details" border size="small">
          <el-table-column v-if="form.info.specifications[0]&&form.info.specifications[0].name" :label="form.info.specifications[0]&&form.info.specifications[0].name?form.info.specifications[0].name:null" prop="first_class_value" width="140" align="center"/>
          <el-table-column v-if="form.info.specifications[1]&&form.info.specifications[1].name" :label="form.info.specifications[1]&&form.info.specifications[1].name?form.info.specifications[1].name:null" prop="two_class_value" width="140" align="center"/>
          <el-table-column v-if="form.info.specifications[2]&&form.info.specifications[2].name" :label="form.info.specifications[2]&&form.info.specifications[2].name?form.info.specifications[2].name:null" prop="three_class_value" width="140" align="center"/>
          <el-table-column label="当前库存" width="140">
            <template slot-scope="scope">
              {{ showOldInventory(scope.row) }}
            </template>
          </el-table-column>
          <el-table-column prop="inventory" label="库存" width="140">
            <template slot-scope="scope">
              <el-input v-model.number="scope.row.inventory" size="small" @change="changeInventory(scope.row.inventory)"/>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <!--无规格-->
      <el-form-item v-else label="修改库存:" prop="inventory">
        <el-input v-model.number="form.info.inventory" style="width: 370px;" @change="changeInventory(form.info.inventory)"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="cancel">取消</el-button>
      <el-button type="primary" size="small" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updateInventory } from '@/api/mall/commodityList'
export default {
  components: { },
  data() {
    return {
      dialog: false,
      form: {
        ids: [],
        info: {
          inventory: 0,
          specification_details: [],
          specifications: []
        },
        oldInfo: {}
      },
      rules: {
        inventory: [
          { required: true, message: '请输入数字', trigger: 'blur', type: 'number' }
        ]
      }
    }
  },
  methods: {
    showOldInventory(e) {
      const info = this.form.oldInfo.specification_details.filter(item => {
        return e.first_class_id === item.first_class_id &&
          e.two_class_id === item.two_class_id &&
          e.three_class_id === item.three_class_id
      })
      return info.length > 0 && info[0].inventory ? info[0].inventory : 0
    },
    changeInventory(value1) {
      // 只能输入数字
      const numReg = /^[0-9]*$/
      if (value1 === '' || !numReg.test(value1)) {
        value1 = 0
        this.$message({
          message: '请输入正确数字',
          type: 'warning'
        })
        this.$forceUpdate()
      }
      return 0
    },
    cancel() {
      this.resetForm()
    },
    doSubmit() {
      // 表单验证
      this.$refs['form'].validate((valid) => {
        // 通过
        if (valid) {
          updateInventory(this.form.info).then(res => {
            if (res) {
              // 执行成功
              this.resetForm()
              this.$notify({
                title: '修改成功',
                type: 'success',
                duration: 2500
              })
              this.$parent.init()
            } else {
              // 系统不会报错，但是会有提示语，告知如何操作
              this.$notify({
                title: '修改失败',
                type: 'error',
                duration: 2500
              })
            }
          }).catch(err => {
            console.log(err.response.data.message)
          })
        }
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }

</style>
